<template>
  <div class="main">
    <h2>他人的留言</h2>
    <div class="card-box">
      <a-form layout="inline" class="clearfix" v-if="changeTar==1">
        <a-form-item label="关键字：">
          <a-input placeholder="请输入需求名称或者需求编号" style="width:250px;" />
        </a-form-item>
        <a-form-item label="状态：">
          <a-select default-value="全部" style="width: 120px">
            <a-select-option
              v-for="item in reStatus"
              :value="item.label"
              :key="item.key"
            >{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="留言时间">
          <a-range-picker :placeholder="['开始日期', '结束日期']">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-item>
        <a-button class="f-right mt-5" type="primary">搜索</a-button>
        <a-button class="f-right mr-10 mt-5" style="color:#909399;">重置</a-button>
      </a-form>
      
      <a-form layout="inline" class="clearfix" v-if="changeTar==2">
        <a-form-item label="关键字：">
          <a-input placeholder="请输入产品名称或者产品编号" style="width:250px;" />
        </a-form-item>
        <a-form-item label="状态：">
          <a-select default-value="全部" style="width: 120px">
            <a-select-option
              v-for="item in reStatus"
              :value="item.label"
              :key="item.key"
            >{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="留言时间">
          <a-range-picker :placeholder="['开始日期', '结束日期']">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-item>
        <a-button class="f-right mt-5" type="primary">搜索</a-button>
        <a-button class="f-right mr-10 mt-5" style="color:#909399;">重置</a-button>
      </a-form>
    </div>
    <div>
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="需求">
          <div style="margin-bottom: 16px">
            <a-button
              type="primary"
              class="mr-10"
              :disabled="!hasSelected"
              :loading="loading"
              @click="start"
            >设置为已读</a-button>
            <a-button type="primary" ghost>
              <router-link to="RequirementRelease">
                发布需求
              </router-link> 
            </a-button>
            <span style="margin-left: 8px">
              <template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
            </span>
          </div>
          <a-table
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="columns"
            :data-source="data"
            :pagination="ipagination"
            :rowKey="record=>record.idNum"
          >
            <span slot="action" slot-scope="text,record">
              <a @click="seeEdit(record)" style="margin-right:32px">查看详情</a>
              <a @click="delEdit(record)">删除</a>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="供应">
          <div style="margin-bottom: 16px">
            <a-button
              type="primary"
              class="mr-10"
              :disabled="!hasSelected"
              :loading="loading"
              @click="start"
            >设置为已读</a-button>
            <a-button type="primary" ghost>
              <router-link to="ProductsRelease">
                发布产品
              </router-link> 
            </a-button>
            <span style="margin-left: 8px">
              <template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
            </span>
          </div>
          <a-table
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="columns"
            :data-source="data"
            :pagination="ipagination"
            :rowKey="record=>record.idNum"
          >
            <span slot="action" slot-scope="text,record">
              <a @click="seeEdit(record)" style="margin-right:32px">查看详情</a>
              <a @click="delEdit(record)">删除</a>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "idNum"
  },
  {
    title: "标题",
    dataIndex: "title"
  },
  {
    title: "消息分类",
    dataIndex: "reMessage",
    customRender: function(text) {
      if (text == 1) {
        return "供需推荐";
      } else if (text == 2) {
        return "系统消息";
      }
    }
  },
  {
    title: "推送时间",
    dataIndex: "reTime"
  },
  {
    title: "状态",
    dataIndex: "restatus",
    customRender: function(text) {
      if (text == 1) {
        return "已读";
      } else if (text == 2) {
        return "未读";
      }
    }
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];

const data = [];
for (let i = 1; i < 46; i++) {
  data.push({
    idNum: i,
    title: "深圳市某某电子商务公司向您发送了供应留言",
    reMessage: "2",
    reTime: "2020.09.27",
    restatus: "1"
  });
}
export default {
  data() {
    return {
      reStatus: [
        {
          label: "已读",
          key: "1"
        },
        {
          label: "未读",
          key: "2"
        }
      ],
      ipagination: {
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: total => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true
      },
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      changeTar:1,
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    callback(key) {
      console.log(key);
      this.changeTar = key;
    },
  }
};
</script>

<style lang="less" scoped>
.main {
  padding: 16px 24px;
  background-color: #ffffff;
  border-radius: 4px;
  span {
    a {
      color: #188af1;
    }
  }

  h2 {
    font-size: 22px;
    font-weight: 700;
    color: #303133;
    margin-bottom: 24px;
  }

  .card-box {
    padding: 16px;
    margin-bottom: 24px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
}
</style>